<template>
  <div class="Event-swiper">
    <div class="self-wrap-container">
      <div class="prev btn-abs" @click="slidePrev" v-if="currentIndex == 2"><el-icon color="#409EFC" :size="40" ><ArrowLeft /></el-icon></div>
      <div class="next btn-abs" @click="slideNext" v-if="currentIndex == 1"><el-icon color="#409EFC" :size="40" ><ArrowRight /></el-icon></div>
      
      <div class="self-swiper">
        <div class="swiper-self" v-if="currentIndex==1">
          <SwiperScreen1 />
        </div>
        <div class="swiper-self"  v-if="currentIndex==2">
          <SwiperScreen2 />
        </div>
      </div>
    </div>
    <!-- <swiper
      :space-between="10"
      :modules="modules"
      :pagination="{ clickable: true }"
      :draggable="true"
      ref="mySwiperRef"
      @swiper="onSwiper"
      @slide-change="changeSwiper"
    >
      <swiper-slide>
        <div class="swiper-self">
          <SwiperScreen1 />
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="swiper-self">
          <SwiperScreen2/>
        </div>
      </swiper-slide>
    </swiper> -->
    <!-- <div class="btn-wrap">
      <el-button type="primary" @click="slidePrev" v-if="currentIndex == 2">上一页</el-button>
      <el-button type="primary" @click="slideNext" v-if="currentIndex == 1">下一页</el-button>
    </div> -->
  </div>
</template>
<script setup lang="ts">
  import { A11y, Autoplay, Pagination } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/less';
  import 'swiper/less/navigation';
  import 'swiper/less/pagination';
  import SwiperScreen1 from './index-swiper1.vue';
  import SwiperScreen2 from './index-swiper2.vue';
  import { ref, onMounted, toRaw, reactive } from 'vue';
  let modules = [A11y];

  const swiperNew: any = ref();
  let currentIndex = ref(1);
  const onSwiper = (swiper: any) => {
    swiperNew.value = toRaw(swiper);
    console.log();
  };
  const changeSwiper = (swiper) => {
    console.log(swiper.activeIndex);
    currentIndex.value = swiper.activeIndex + 1;
  };

  const mySwiperRef = swiperNew.value;
  const slidePrev = () => {
    console.log(swiperNew, mySwiperRef);
     currentIndex.value = 1;
    // if (swiperNew.value) {
    //   currentIndex.value = 1;
    //   swiperNew.value.slidePrev();
    // }
  };
  const slideNext = () => {
    currentIndex.value = 2;
    if (swiperNew.value) {
      //currentIndex.value = 2;
      //swiperNew.value.slideNext();
    }
  };
</script>
<style scoped lang="less">
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes leftShow {
  from { left: -100%; }
  to { left: 1; }
}
  .Event-swiper {
    width: 100%;
    height: 100vh;
    background: rgb(235, 239, 245);
    padding: 0;
    margin: 0;
    .self-wrap-container {
      position: relative;
      width: 100%;
      height:100vh;//calc(100vh - 0px);
      overflow: hidden;
      .btn-abs{
        position: absolute;
       background: rgba(0,0,0,0.1);
        padding: 10px 5px;
        cursor: pointer;
        animation: fadeIn 0.5s ease-in-out forwards;
        z-index: 99999;
        &:hover{
         background: rgba(0,0,0,0.2);
        }
        &.prev{
          left: 5px;
          top:45%;
        }
        &.next{
          right: 5px;
          top:45%;
        }
      }
    }
    .self-swiper {
      //position: absolute;
      display: flex;
      flex-wrap: nowrap;
    }
    // background: red;
    list-style: none;
    box-sizing: border-box;
    .swiper-self {
      width: 100%;
      height:100vh;// calc(100vh - 0px);
      // background: red;
      animation:  leftShow 1s linear ;
      
    }
    .btn-wrap {
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
</style>
